<template>
  <div class="container-box" v-loading="fullscreenLoading" element-loading-text="加载中">
    <!-- 回到顶部-->
    <el-backtop target=".content-container"></el-backtop>
    <!--搜索组件-->
    <div class="form-box">
      <el-form :model="selDateFrom" ref="selDateFrom">
        <el-row class="input-box" :gutter="20">
          <div class="left">
            <el-tooltip content="手动输入时间段从邮箱获取更早的发票" placement="top" effect="light">
              <div class="search-btn" @click.stop="getInvoiceD">
                <i class="el-icon-my-search-more"></i>
                <span class="fun-name">获取更多</span>
              </div>
            </el-tooltip>
          </div>
          <div class="left">
            <div class="search-btn" @click.stop="getHistoryD">
              <i class="el-icon-my-search-history"></i>
              <span class="fun-name">获取记录</span>
            </div>
          </div>
          <div class="left">
            <el-tooltip content="勾选对应的发票进行合并成一个文件" placement="top" effect="light">
              <div class="search-btn" @click="mergeInvoice">
                <i class="el-icon-my-search-print"></i>
                <span class="fun-name">合并打印</span>
              </div>
            </el-tooltip>
          </div>
          <div class="left">
            <el-tooltip content="勾选对应的发票导出为Excel文件" placement="top" effect="light">
              <div class="search-btn" @click="dataExport">
                <i class="el-icon-my-search-export"></i>
                <span class="fun-name">导出</span>
              </div>
            </el-tooltip>
          </div>
          <div class="left">
            <div class="search-btn" @click="search">
              <i class="el-icon-my-search-screen"></i>
              <span class="fun-name">筛选</span>
            </div>
          </div>
          <div class="left">
            <div class="search-btn" @click="deleteMail">
              <i class="el-icon-my-search-delete"></i>
              <span class="fun-name">删除</span>
            </div>
          </div>
          <div class="left">
            <div class="search-btn">
              <el-tooltip content="批量上传本地发票" placement="top" effect="light">
                <div>
                  <label for="fileInput">
                    <i class="el-icon-my-search-upload"></i>
                    <span class="fun-name">上传</span>
                  </label>
                  <input v-show="false" type="file" id="fileInput" ref="upload_many" @change="onFileChange" accept=".jpg,.pdf,.png" multiple>
                </div>
              </el-tooltip>
            </div>
          </div>

          <div class="right w200">
            <el-input class="" placeholder="购买方、销售方" @keyup.enter.native="searchName" size="small" v-model="selDateFrom.serachManyName">
              <i slot="suffix" class="el-input__icon el-icon-search" @click.prevent="searchName"></i>
            </el-input>
          </div>
        </el-row>
      </el-form>
    </div>
    <!--分页列表-->
    <iTable v-if="pageObj.total>0" :tableData="tableData" class="listTable" :columns="columns" :loading="loading" :tableFun="tableFun" :pageObj="pageObj" ref="mutipleTable" >
      <el-table-column slot="invoiceStatusName" label="合并状态" :render-header="invoiceStatusTips" align="center" width="210">
        <template slot-scope="scope">
          <span v-if="scope.row.invoiceStatus === '1'" class="line-success">{{scope.row.invoiceStatusName}}</span>
          <span v-else class="line-danger">{{scope.row.extendField1}}</span>
        </template>
      </el-table-column>
      <el-table-column slot="sourceStatusName" label="发票来源" align="center" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.sourceStatus === '1'" >{{scope.row.sourceStatusName}}</span>
          <span v-else class="line-info">{{scope.row.sourceStatusName}}</span>
        </template>
      </el-table-column>
<!--      <el-table-column slot="operate" label="操作" align="center" fixed="right" width="100">-->
<!--        <template slot-scope="scope">-->
<!--          <el-popover-->
<!--            placement="left-start"-->
<!--            width="50"-->
<!--            trigger="click"-->
<!--            popper-class="popover_on"-->
<!--            @show="showOperation(scope.$index + 1)"-->
<!--            @hide="hideOperation(scope.$index + 1)"-->
<!--          >-->
<!--            <el-row :gutter="0" class="operation">-->
<!--              <el-col :span="24"><div style="padding-bottom: 10px" @click="invoiceInfo(scope.row,'1')"><i class="el-icon-my-update"></i><span class="see-text">发票信息</span></div></el-col>-->
<!--              <el-col :span="24"><div style="padding-bottom: 10px" @click="detailInvoice(scope.row,'1')"><i class="el-icon-my-see"></i><span class="see-text">查看发票</span></div></el-col>-->
<!--            </el-row>-->
<!--            <i slot="reference" v-if="operationIndex == scope.$index + 1" class="el-icon-my-operation-on"></i>-->
<!--            <i slot="reference" v-else class="el-icon-my-operation"></i>-->
<!--          </el-popover>-->

<!--        </template>-->
<!--      </el-table-column>-->
    </iTable>
    <div class="listNull" v-else>
      <i class="el-icon-my-list-null"></i>
      <div class="list-null-text">赶紧去获取发票吧</div>
    </div>
    <!--搜索弹出框-->
    <el-dialog :title="searchDialog.title" :width="searchDialog.width" :top="searchDialog.top" :modal="searchDialog.modal" :visible.sync="searchDialog.dialogVisible" :center="true">
      <el-form :model="searchDialog.form">
        <el-form-item label="发票日期：" :label-width="searchDialog.formLabelWidth">
          <div class="left">
            <el-date-picker
              v-model="selDateFrom.startDate"
              size="small"
              type="daterange"
              prefix-icon="el-icon-date"
              range-separator="-"
              start-placeholder="开票开始日期"
              end-placeholder="开票截止日期"
              format="yyyy年MM月dd"
              value-format="yyyy-MM-dd"
              align="right"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="合并状态：" :label-width="searchDialog.formLabelWidth">
          <div class="left w150">
            <el-select size="small" v-model="selDateFrom.invoiceStatus" placeholder="请选择合并状态">
              <el-option
                v-for="item in invoiceStatusDateList"
                :key="item.baseId"
                :label="item.baseName"
                :value="item.baseCodeValue"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="发票来源：" :label-width="searchDialog.formLabelWidth">
          <div class="left w150">
            <el-select size="small" v-model="selDateFrom.sourceStatus" placeholder="请选择发票来源">
              <el-option
                v-for="item in sourceStatusDateList"
                :key="item.baseId"
                :label="item.baseName"
                :value="item.baseCodeValue"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-show="!searchDialog.detail" style="text-align: center;">
        <el-button @click="resetForm" style="width:100px;height:32px;padding: 8px 20px;">重 置</el-button>
        <el-button type="primary" @click="selForm" style="width:100px;height:32px;padding: 8px 20px;">筛 选</el-button>
      </div>
    </el-dialog>

    <!--获取发票弹出框-->
    <el-dialog title="" :width="invoiceDialog.width" :top="invoiceDialog.top" :modal="invoiceDialog.modal" :visible.sync="invoiceDialog.dialogVisible" :center="true">
      <div class="invoice-dialog-desc">受性能影响，时间段选择限制在三十天以内</div>
      <el-form :model="invoiceDialog.form">
        <el-form-item label="获取时间段：" :label-width="invoiceDialog.formLabelWidth">
          <div class="left">
            <el-date-picker
              v-model="invoiceDialog.form.date"
              size="small"
              type="daterange"
              prefix-icon="el-icon-date"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="截止日期"
              :picker-options="invoiceDialog.pickerOptions"
              format="yyyy年MM月dd"
              value-format="yyyy-MM-dd"
              align="right"
            ></el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-show="!searchDialog.detail" style="text-align: center;">
        <el-button type="primary" @click="getInvoice" style="width:100px;height:32px;padding: 8px 20px;">获 取</el-button>
      </div>
    </el-dialog>

    <chooseDialog :show.sync="chooseVisible"></chooseDialog>
    <load ref="load" />
    <operateDialog ref="operate" />
    <historyDialog ref="history" :show="historyDialog.show" :tabDataList="historyDialog.historyData" :moreDate="historyDialog.moreDateFunc" :noData="historyDialog.noData" />

  </div>
</template>
<script>
  import iTable from "common/iTable";
  import chooseDialog from "common/chooseDialog";
  import load from "common/load";
  import operateDialog from "common/dialog/operate/operate";
  import historyDialog from "common/dialog/history/history";
  import * as commonApi from "api/common";
  import {baseUrl} from 'config/index.js'

  export default {
    components: {
      iTable,chooseDialog,load, operateDialog,historyDialog
    },
    data() {
      return {
        columns: [ //列表头
          {label: '开票日期', prop: 'invoiceDate', width: '140', align: 'center'},
          {label: '购方名称', prop: 'purchaseName', width: '240', align: 'left'},
          {label: '销售方名称', prop: 'sellerName', width: '240', align: 'left'},
          {label: '合计金额', prop: 'amount', width: '120', align: 'center'},
          // {label: '发票代码', prop: 'invoiceCode', width: '150', align: 'left'},
          {label: '发票号码', prop: 'invoiceNumber', width: '120', align: 'center'},
          {slot: 'invoiceStatusName'},
          {slot: 'sourceStatusName'},
          {label: '', prop: 'none', align: 'left'},
          // {label: '发票名称', prop: 'invoiceName'},
          // {slot: 'operate'} // 操作列
        ],
        loading: false, //列表加载
        fullscreenLoading: false, //整体加载
        tableFun: { //列表函数
          rowClick:((row, event, column) =>{ //行点击事件
            this.detailInvoice(row, event, column)
          }),
        },
        pageObj: { //分页列表参数
          id: 'invoiceId', //分页数据中的主键id
          sizes: [10, 20, 50, 100], //分页数
          size: 10, //当前分页数
          total: 0, //总数
          currentPage: 1, //当前页
          pageFunc:(currentPage) =>{ //点击分页
            this.receiveCurrentPage(currentPage)
          },
          pageSizeFunc:(currentPage) =>{ //改变分页尺寸
            this.receivePageSize(currentPage)
          }
        },
        tableData: [], //列表数据
        operationIndex: '', //操作按钮状态控制
        selDateFrom: {
          purchaseName: "", //购方名称
          serachManyName: '',//名称批量搜索
          sourceStatus: '', //发票来源
          invoiceStatus: '', //识别状态
          startDate: '',
          invoiceNumber: '',
        },
        sourceStatusDateList: [],
        invoiceStatusDateList: [],
        userId: '',
        searchDialog:{
          id: '', //唯一标识
          title: '', //弹出框标题
          width: '450px', //弹出框宽度
          top: '27vh', //margin-top 值
          modal: false, //是否需要遮罩层
          dialogVisible: false, //是否显示弹窗框
          detail: false, //是否展示位详情
          formLabelWidth: '90px', //label的宽度
          form:{}, //表单内容
        },
        //获取发票弹出框配置
        invoiceDialog:{
          id: '', //唯一标识
          title: '', //弹出框标题
          width: '450px', //弹出框宽度
          top: '27vh', //margin-top 值
          modal: false, //是否需要遮罩层
          dialogVisible: false, //是否显示弹窗框
          detail: false, //是否展示位详情
          formLabelWidth: '100px', //label的宽度
          form:{
            date: '',
          }, //表单内容
          choiceDate0: '',
          pickerOptions: {
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              this.invoiceDialog.choiceDate0 = minDate.getTime();
              if (maxDate) {
                this.invoiceDialog.choiceDate0 = '';
              }
            },
            disabledDate:
              (time) => {
                let choiceDateTime = new Date(this.invoiceDialog.choiceDate0).getTime();
                const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 1);
                const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 1);
                const min = minTime;
                const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
                const max = newDate < maxTime ? newDate : maxTime;
                //如果已经选中一个日期 则 返回 该日期前后一个月时间可选
                if (this.invoiceDialog.choiceDate0) {
                  return time.getTime() < min || time.getTime() > max;
                }
                //若一个日期也没选中 则 返回 当前日期以前日期可选
                return time.getTime() > newDate;
              }
          },
        },
        historyDialog:{
          show: false,
          noData: false, //加载完成
          historyData: [],
          moreDateFunc:() =>{ //点击分页
            this.getHistory()
          },
        },
        chooseVisible: false, //用户选择dialog

      };
    },
    beforeRouteLeave(to, from, next) { //判断路由的跳转 详情页面返回则不要更新页面数据
      if (to.path === '/invoice/invoiceDetail'){ //详情
        from.meta.keepAlive = true;
      } else {
        from.meta.keepAlive = false;
      }
      next();
    },
    created() { //页面创建钩子
      console.log('----------invoiceList created-------------')
      let user = JSON.parse(sessionStorage.getItem("user"))
      this.userId = user.userId
      this.getMailDate()
      this.getInvoiceStatusDateList()
      this.getSourceStatusDateList()
    },
    mounted() { //页面载入钩子
    },
    destroyed() { //页面销毁钩子
    },
    methods: {
      receivePageSize(val) { //改变当前页大小
        this.pageObj.currentPage = 1
        this.pageObj.size = val
        this.getMailDate()
      },
      receiveCurrentPage(val) { //页码切换
        this.pageObj.currentPage = val
        this.getMailDate()
      },
      showOperation: function (e) { //分页列表操作点击事件
        this.operationIndex = e
      },
      hideOperation: function (e) { // 分页列表操作隐藏事件
        if (this.operationIndex == e) {
          this.operationIndex = ''
        }
      },
      invoiceStatusTips: function(h, { column, $index }){ //合并状态 表头提示
        return [
          '合并状态',
          h(
            'el-tooltip',
            {
              props: {
                content: (function() {
                  return `列表展示合并后的文件名称，不支持再次下载，可本地文件名搜索`
                })(),
                placement: 'top'
              }
            },
            [
              h('span', {
                class: {
                  'el-icon-question': true
                }
              })
            ]
          )
        ]
      },
      invoiceInfo: function (e, type) { //发票信息
        this.$router.push({name:'invoiceDetail', params:{invoiceId: e.invoiceId}})
      },
      detailInvoice: function(row, event, column){ //发票文件
        let invoiceId = row.invoiceId
        window.open(baseUrl + "/main/js/pdfjs/web/viewer.html?file=" +
          encodeURIComponent(baseUrl + "/invoice/webs/readPdf?invoiceId=" + invoiceId), "_blank")
      },
      //筛选点击事件
      search(){
        this.searchDialog.dialogVisible = true
      },

      resetForm(){ //重置表单
        this.selDateFrom.purchaseName = ''
        this.selDateFrom.sourceStatus = ''
        this.selDateFrom.invoiceStatus = ''
        this.selDateFrom.invoiceNumber = ''
        this.selDateFrom.startDate = ''
      },
      selForm(){ //查询
        this.searchDialog.dialogVisible = false
        this.pageObj.currentPage = 1
        this.getMailDate()
      },
      searchName(){ //搜索查询
        this.pageObj.currentPage = 1
        this.getMailDate()
      },
      getMailDate(){ //获取发票列表数据
        this.loading = true
        const params = {}
        params.userId = this.userId
        params.limit = this.pageObj.size
        params.offset = (this.pageObj.currentPage - 1) * this.pageObj.size

        const date = this.selDateFrom.startDate.toString()
        if (date != null && date != ''){
          const arr = date.split(",")
          params.startDate = arr[0]
          params.endDate = arr[1]
        }
        params.purchaseName = this.selDateFrom.purchaseName
        params.serachManyName = this.selDateFrom.serachManyName
        params.sourceStatus = this.selDateFrom.sourceStatus
        params.invoiceStatus = this.selDateFrom.invoiceStatus
        params.invoiceNumber = this.selDateFrom.invoiceNumber

        commonApi.findInvoiceList(params).then(res => {
          this.loading = false
          let {data} = res;
          if (data.status === 200) {
            this.pageObj.total = data.data.total
            this.tableData = data.data.rows
          }
        })
      },
      deleteMail(){ //删除发票
        let arr = this.$refs.mutipleTable.selectDataArrL // 获取勾选的值
        if (arr == null || arr.length === 0){
          this.$msg({text: '请勾选发票！', type: 'info'})
          return
        }
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {invoiceIds: arr}
          commonApi.deleteInvoice(params).then(res => {
            let {data} = res;
            if (data.status === 200) {
              if (data.data.result){
                this.$msg({text: data.data.msg, type: 'success'})
                // 刷新列表
                this.pageObj.currentPage = 1
                this.getMailDate()
              } else {
                this.$msg({text: data.data.msg, type: 'error'})
              }
            } else {
              this.$msg({text: '删除失败', type: 'error'})
            }
          })
        }).catch(() => {
          console.log('取消刪除')
        });
      },
      dataExport(){
        let arr = this.$refs.mutipleTable.selectDataArrL // 获取勾选的值
        console.log(arr)
        if (arr == null || arr.length === 0){
          this.$msg({text: '请勾选发票！', type: 'info'})
          return
        }
        const params = {invoiceIds: arr}
        commonApi.exportInvoice(params).then(res => {
          let {data} = res;
          if (data.status === 200) {
            if (data.data.result){
              this.$msg({text: data.data.msg, type: 'success'})
              var url = data.data.url;
              let a = document.createElement('a')
              a.href = url
              a.click();
            } else {
              this.$msg({text: data.data.msg, type: 'error'})
            }
          } else {
            this.$msg({text: '导出失败', type: 'error'})
          }
        })
        // this.$emit('viewIn',"/invoice/invoiceDetail");
      },
      mergeInvoice(){ //发票合并
        let arr = this.$refs.mutipleTable.selectDataArrL // 获取勾选的值
        console.log(arr)
        if (arr == null || arr.length === 0){
          this.$msg({text: '请勾选发票！', type: 'info'})
          return
        }
        const params = {invoiceIds: arr}
        commonApi.mergeInvoice(params).then(res => {
          let {data} = res;
          if (data.status === 200) {
            if (data.data.result){
              this.$msg({text: data.data.msg, type: 'success'})
              // 文件下载地址
              const filePath = "/" + "upload" + "/" + "invoice" + "/" +
                "tempFile" + "/";
              let fileName = data.data.fileName
              const url = baseUrl + filePath + fileName
              this.downloadFile(fileName, url)
              this.getMailDate()
              setTimeout(() =>{
                // pdf预览
                window.open(baseUrl + "/main/js/pdfjs/web/viewer.html?file=" +
                  encodeURIComponent(baseUrl + "/invoice/webs/readPdf?invoiceUrlName=" + fileName), "_blank")
              }, 1000)
            } else {
              this.$msg({text: data.data.msg, type: 'error'})
            }
          } else {
            this.$msg({text: '合并失败', type: 'error'})
          }
        })
      },
      getSourceStatusDateList(){ //发票来源
        const params = {baseCode: "INVOICE_INVOICE_RESOURCE"}
        commonApi.getBaseDateList(params).then(res => {
          let {data} = res;
          if (data.status === 200) {
            this.sourceStatusDateList = data.data
          }
        })
      },
      getInvoiceStatusDateList(){ //识别状态
        const params = {baseCode: "INVOICE_PRINT_STATUS"}
        commonApi.getBaseDateList(params).then(res => {
          let {data} = res;
          if (data.status === 200) {
            this.invoiceStatusDateList = data.data
          }
        })
      },
      findInvoiceMail(id){ //查询发票详情
        const params = {invoiceMailId: id}
        commonApi.findInvoiceMail(params).then(res => {
          let {data} = res;
          if (data.status === 200) {
            this.searchDialog.form = data.data
          }
        }).catch(() => {
          this.$msg({text: '查询异常', type: 'error'})
        })
      },
      onFileChange: function (e) { //发票批量上传
        let files = e.target.files || e.dataTransfer.files;//e.target.files[0]可直接上传，因为我是多个文件，所以files是一个数组
        if (!files.length) {
          this.$msg ({text: '请选择文件！', type: 'error'})
          return
        }
        var formData = new FormData ();
        formData.append ('userId', this.userId)//append到数组里，如果有参数可以加参数
        for(var i=0;i<files.length;i++){//循环这个数组，创建fomeDate
          formData.append ('upload_file', files[i])
        }
        this.fullscreenLoading = true
        commonApi.uploadManyInvoice(formData).then(res => {
          this.fullscreenLoading = false
          this.$refs.upload_many.value=''
          let {data} = res;
          if (data.status === 200){
            if (data.data.result){
              this.$msg({text: "共识别发票"+data.data.fileNum+"张", type: 'success'})
              // 刷新列表
              this.getMailDate()
            } else {
              this.$msg({text: data.data.msg, type: 'error'})
            }
          } else {
            this.$msg({text: '文件上传失败', type: 'error'})
          }
        }).catch(() => {
          this.$refs.upload_many.value=''
          this.fullscreenLoading = false
          this.$msg({text: '上传异常', type: 'error'})
        })
      },
      downloadFile(fileName, filePath) { //根据链接下载后台文件
        if (!filePath) {
          return;
        }
        let link = document.createElement('a')
        fetch(filePath).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
          link.href = URL.createObjectURL(blob)
          link.download = fileName
          document.body.appendChild(link)
          link.click()
        })
      },
      //点击获取发票按钮，打开时间搜索框
      getInvoiceD(){
        this.invoiceDialog.dialogVisible = true
      },
      //点击获取记录按钮，展示历史记录框
      getHistoryD(){
        this.historyDialog.historyData = []
        this.historyDialog.noData = false
        this.getHistory()
        this.$refs.history.showO()
      },
      getHistory(){
        const params = {userId: this.userId}
        params.limit = 5
        const hData = this.historyDialog.historyData
        params.offset = hData.length
        commonApi.getRecordList(params).then(res => {
          let {data} = res;
          if (data.status === 200) {
            if (data.data != null && data.data.length > 0){
              this.historyDialog.historyData = hData.concat(data.data)
              if (data.data.length < 5){
                this.historyDialog.noData = true
              }
            } else {
              this.historyDialog.noData = true
            }
          }
        })
      },
      getInvoice(){
        this.invoiceDialog.dialogVisible = false //关闭时间搜索框

        // 获取发票
        const params = {
          userId: this.userId
        }
        // 放入时间参数
        const date = this.invoiceDialog.form.date.toString()
        if (date != null && date != ''){
          const arr = date.split(",")
          params.startDate = arr[0]
          params.endDate = arr[1]
        }
        commonApi.getNewInvoice(params).then(res => {
          let {data} = res;
          if (data.status === 200) {
            this.$refs.load.showLoad('连接邮箱中')
            setTimeout(this.getInvoiceStatus, 3 * 1000);
          } else if(data.status == '555'){
            this.$refs.operate.showO('添加邮箱信息后才能获取发票，快去添加吧！', '去添加', data.status, 2)
          } else if(data.status == '556'){
            this.$refs.operate.showO('添加邮箱授权码后才能获取发票，快去添加吧！', '去添加', data.status, 2)
          } else if(data.status == '557'){
            this.$refs.operate.showO('充值vip会员后才能获取发票，快去充值吧！', '去充值', data.status, 2)
          } else if(data.status == '558'){
            this.$refs.operate.showO('充值vip会员后才能获取发票，快去充值吧！', '去充值', data.status, 2)
          } else if(data.status == '559'){
            this.$refs.operate.showO('充值vip会员后才能获取发票，快去充值吧！', '去充值', data.status, 2)
          }else {
            this.$msg({text: data.msg, type: 'error'})
          }
        })
      },
      getInvoiceStatus(){ //获取发票状态
        var _this = this
        commonApi.getInvoiceStatus(this.userId).then(res => {
          let {data} = res;
          if (data.status === 200) {
            var newStatus = parseInt(data.data.status);
            if(data.data.result){
              if (newStatus != 4) { //未结束则一直轮询
                setTimeout(_this.getInvoiceStatus, 5 * 1000);
                if (newStatus == 1) {
                  this.$refs.load.setLoadText('连接邮箱中')
                } else if (newStatus == 2) {
                  this.$refs.load.setLoadText('获取邮件中')
                } else if (newStatus == 3) {
                  this.$refs.load.setLoadText('解析邮件中')
                }
              } else {
                //给出文字提示
                this.$refs.load.loadSucc('共获取'+ data.data.invoice +'封邮件')
                // 刷新列表
                this.getMailDate()
                //每次获取完更新用户信息
                this.$emit('reloadUser'); // 刷新父组件信息
                //3s 后关闭加载动画
                setTimeout(()=>{
                  this.$refs.load.closeLoad()
                }, 3000)
              }
            } else {
              if (newStatus == 1) {
                this.$refs.load.setErrorText('连接邮箱失败')
              } else if (newStatus == 2) {
                this.$refs.load.setErrorText('获取邮件失败')
              } else if (newStatus == 3) {
                this.$refs.load.setErrorText('解析邮件失败')
              } else if (newStatus == 4) {
                this.$refs.load.setErrorText('保存邮件失败')
              } else {
                this.$refs.load.setErrorText('获取邮件异常')
              }
            }
          }
        })
      },
    },

  };
</script>

<style scoped lang="scss">
  @import "../../assets/css/them";
  :focus{
    outline: none;
  }

  @media screen and (max-width: 1600px){
    .container-box {
      .form-title{
        background: #F5F5FB;
        padding-bottom: 20px;
        .el-icon-my-title {
          width: 20px;
          background: url("../../assets/img/list@2x.png") center no-repeat;
          background-size: 20px;
          line-height: 2;
          margin-right: 16px;
        }
        .el-icon-my-title:before {
          content: "替";
          visibility: hidden;
        }
        .form-title-text{
          display: inline-block;
          color: #858993;
          font-size:14px;
        }
      }
      /*搜索组件样式*/
      .form-box {
        padding: 15px 20px 15px 20px;
        background: $globalColor;
        position: fixed;
        margin-top: -52px;
        border-radius: 20px;
        z-index: 99;
        width: calc(100% - 210px);
        .input-box {
          .search-btn{
            cursor: pointer;
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            .fun-name{
              font-size: 14px;
              font-weight: 400;
              margin-left: 4px;
            }
            /*筛选*/
            .el-icon-my-search-screen {
              background: url("../../assets/img/screen.png") center no-repeat;
              background-size: 18px;
              width: 18px;
              line-height: 2;
            }
            .el-icon-my-search-screen:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-delete{
              background: url("../../assets/img/del@2x.png") center no-repeat;
              background-size: 18px;
              width: 18px;
              line-height: 2;
            }
            .el-icon-my-search-delete:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-upload{
              background: url("../../assets/img/upload.png") center no-repeat;
              background-size: 18px;
              width: 18px;
              line-height: 2;
            }
            .el-icon-my-search-upload:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-print{
              background: url("../../assets/img/print.png") center no-repeat;
              background-size: 18px;
              width: 18px;
              line-height: 2;
            }
            .el-icon-my-search-print:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-more{
              background: url("../../assets/img/more.png") center no-repeat;
              background-size: 18px;
              width: 18px;
              line-height: 2;
            }
            .el-icon-my-search-more:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-history{
              background: url("../../assets/img/history.png") center no-repeat;
              background-size: 18px;
              width: 18px;
              line-height: 2;
            }
            .el-icon-my-search-history:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-export{
              background: url("../../assets/img/export.png") center no-repeat;
              background-size: 16px;
              width: 16px;
              line-height: 2;
            }
            .el-icon-my-search-export:before {
              content: "替";
              visibility: hidden;
            }
          }
        }
        .input-label div {
          padding: 0px !important;
        }
        .input-label .label {
          margin-top: 4px;
        }
        .el-form{
          /deep/ .el-input--small .el-input__inner{
            border-radius: 16px;
          }
        }
      }
      .listNull{ //空数据列表
        margin-top: 52px;
        min-height: 230px;
        width: 100%;
        text-align: center;
        .el-icon-my-list-null{
          background: url("../../assets/img/data-null.png") center no-repeat;
          width: 284px;
          line-height: 221px;
          margin-top: 4%;
        }
        .el-icon-my-list-null:before {
          content: "替";
          visibility: hidden;
        }
        .list-null-text{
          margin-top: 20px;
          font-size:14px;
          font-weight:400;
          color:rgba(153,153,153,1);
          line-height:18px;
        }
      }
      // 回到顶部
      .el-backtop{
        background-color: #e3effd;
        bottom: 150px !important;
      }
      .upload-demo{
        text-align: center;
      }
      // 获取发票文字提示
      .invoice-dialog-desc{
        padding-bottom: 20px;
        margin-left: 5px;
        font-size: 12px;
        color: #c0c4cc;
      }
    }
  }
  @media screen and (min-width: 1600px){
    .container-box {
      .form-title{
        background: #F5F5FB;
        padding-bottom: 20px;
        .el-icon-my-title {
          width: 20px;
          background: url("../../assets/img/list@2x.png") center no-repeat;
          background-size: 20px;
          line-height: 2;
          margin-right: 16px;
        }
        .el-icon-my-title:before {
          content: "替";
          visibility: hidden;
        }
        .form-title-text{
          display: inline-block;
          color: #858993;
          font-size:14px;
        }
      }
      /*搜索组件样式*/
      .form-box {
        padding: 15px 20px 15px 20px;
        background: $globalColor;
        position: fixed;
        margin-top: -52px;
        border-radius: 20px;
        z-index: 99;
        width: calc(100% - 300px);
        .input-box {
          .search-btn{
            cursor: pointer;
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            .fun-name{
              font-size: 16px;
              font-weight: 400;
              margin-left: 8px;
            }
            /*筛选*/
            .el-icon-my-search-screen {
              background: url("../../assets/img/screen.png") center no-repeat;
              background-size: 20px;
              width: 20px;
              line-height: 2;
            }
            .el-icon-my-search-screen:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-delete{
              background: url("../../assets/img/del@2x.png") center no-repeat;
              background-size: 20px;
              width: 20px;
              line-height: 2;
            }
            .el-icon-my-search-delete:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-upload{
              background: url("../../assets/img/upload.png") center no-repeat;
              background-size: 20px;
              width: 20px;
              line-height: 2;
            }
            .el-icon-my-search-upload:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-print{
              background: url("../../assets/img/print.png") center no-repeat;
              background-size: 20px;
              width: 20px;
              line-height: 2;
            }
            .el-icon-my-search-print:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-more{
              background: url("../../assets/img/more.png") center no-repeat;
              background-size: 18px;
              width: 18px;
              line-height: 2;
            }
            .el-icon-my-search-more:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-history{
              background: url("../../assets/img/history.png") center no-repeat;
              background-size: 18px;
              width: 18px;
              line-height: 2;
            }
            .el-icon-my-search-history:before {
              content: "替";
              visibility: hidden;
            }
            .el-icon-my-search-export{
              background: url("../../assets/img/export.png") center no-repeat;
              background-size: 18px;
              width: 18px;
              line-height: 2;
            }
            .el-icon-my-search-export:before {
              content: "替";
              visibility: hidden;
            }
          }
        }
        .input-label div {
          padding: 0px !important;
        }
        .input-label .label {
          margin-top: 4px;
        }
        .el-form{
          /deep/ .el-input--small .el-input__inner{
            border-radius: 16px;
          }
        }
      }
      .listNull{ //空数据列表
        margin-top: 52px;
        min-height: 230px;
        width: 100%;
        text-align: center;
        .el-icon-my-list-null{
          background: url("../../assets/img/data-null.png") center no-repeat;
          width: 284px;
          line-height: 221px;
          margin-top: 12%;
        }
        .el-icon-my-list-null:before {
          content: "替";
          visibility: hidden;
        }
        .list-null-text{
          margin-top: 20px;
          font-size:14px;
          font-weight:400;
          color:rgba(153,153,153,1);
          line-height:18px;
        }
      }
      // 回到顶部
      .el-backtop{
        background-color: #e3effd;
        bottom: 150px !important;
      }
      .upload-demo{
        text-align: center;
      }
      // 获取发票文字提示
      .invoice-dialog-desc{
        padding-bottom: 20px;
        margin-left: 5px;
        font-size: 12px;
        color: #c0c4cc;
      }
    }
  }



</style>
